<!--
*@Author: zt
*@Description: 任务报表创建
*@Date: 2024-07-08 09:51:28
-->
<template>
  <a-layout
    class="f-h-100 s-bg-white">
    <u-table-header>
      <u-form
        :model="searchF"
        :gutter="16"
        :elements="searchEl"
        class="f-w-auto"
        :isSearch="true"
        @formChange="getSearch(1)">
        <a-col>
          <a-space>
            <u-icon-button @click="getSearch(1)">查询</u-icon-button>
          </a-space>
        </a-col>
        <a-col flex="1">
          <a-row justify="end">
            <a-space>
              <u-icon-button @click="pushClick">查看数据</u-icon-button>
              <u-icon-button
                itype="add"
                @click="showEdit = true">
                创建任务
              </u-icon-button>
              <u-icon-button
                itype="delete"
                @click="deleteBtn">
                删除
              </u-icon-button>
            </a-space>
          </a-row>
        </a-col>
      </u-form>
    </u-table-header>
    <u-table-content>
      <u-table
        :columns="columns"
        :data="tabData"
        v-model:pagination="pagenation"
        :scroll="{ y: useTableScroll() }"
        @onDblclick="onDblclick"
        @onSelect="({ selectedRows }) => (tabSelData = selectedRows)"></u-table>
    </u-table-content>
  </a-layout>

  <!-- 编辑弹窗 -->
  <Edit
    v-model:open="showEdit"
    wrap-class-name="full-modal"
    :title="dialogTitle"
    @success="getSearch(1), (showEdit = false)" />

  <EditRow
    v-model:open="showEditRow"
    wrap-class-name="full-modal"
    :keyid="keyid"
    :title="dialogRowTitle" />

  <!-- 导入 -->
  <u-imp-data v-model:open="showImp"></u-imp-data>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from "vue";
import { _IFormEl } from "@/components/common/form/interface";
import { FormItemProps, TableColumnProps } from "ant-design-vue";
import { alertC, messageC } from "@/util/common";
import { useTableScroll } from "@/hooks/useTable";
import * as dynamicReportApi from "@/service/emergency/dynamicReport";
import Edit from "./Edit.vue";
import EditRow from "./editRow.vue";

let keyid = ref("");

let pagenation = reactive({
  total: 0,
  current: 1,
  pageSize: 50,
  showTotal: (total) => `共 ${total} 条`,
});
let searchF = reactive<any>({
  model: {},
});
const tabSelData = ref<any[]>([]);
let showEditRow = ref(false);
const formItemProps: FormItemProps = {
  wrapperCol: { span: 24 },
};
const searchEl: Array<_IFormEl> = [
  {
    label: "任务名称",
    key: "keywords",
    element: "input",
    col: { span: 4 },
    formItemProps: {
      ...formItemProps,
      labelWidth: "80px",
    },
  },
];

// 列表
let tabData = ref([]);
let columns: Array<TableColumnProps> = reactive([
  {
    dataIndex: "index",
    title: "序号",
    width: 60,
    align: "center",
    customRender: ({ text, record, index }) => {
      return index + 1;
    },
  },
  { dataIndex: "filename", title: "任务名称", width: 150 },
  { dataIndex: "remark", title: "任务说明", width: 150 },
  {
    dataIndex: "startdate",
    title: "任务开始时间",
    width: 150,
    customRender: ({ text }) => {
      return (text || "").split(" ")[0];
    },
  },
  {
    dataIndex: "enddate",
    title: "任务结束时间",
    width: 150,
    customRender: ({ text }) => {
      return (text || "").split(" ")[0];
    },
  },
  { dataIndex: "isFill", title: "已填写（人）", width: 80, align: "center" },
  { dataIndex: "noFill", title: "未填写（人）", width: 80, align: "center" },
  {
    dataIndex: "createtime",
    title: "发布时间",
    width: 150,
    customRender: ({ text }) => {
      return (text || "").split(" ")[0];
    },
  },
]);

// 查询数据
const getSearch = async (index?) => {
  let tform = JSON.parse(JSON.stringify(searchF));
  tform.model.keywords = searchF.keywords;
  if (index == 1) {
    pagenation.current = 1;
  }
  tform.current = pagenation.current;
  tform.size = pagenation.pageSize;
  const res = await dynamicReportApi.page({ ...tform });
  if (res.code == 0) {
    tabData.value = res.data.records;
  }
};

// 删除
const deleteBtn = async () => {
  if (tabSelData.value.length == 0) {
    alertC("请先选择要删除的数据!", "warning");
    return;
  }
  let ids = tabSelData.value.map((item) => item.keyid);
  alertC("确认删除选中的数据?", "confirm").then(async () => {
    try {
      const res = await dynamicReportApi.del({ ids: ids.join(",") });

      if (res.code == 0) {
        getSearch(1);
        messageC(res.msg, "success");
      } else {
        alertC(res.msg, "warning");
      }
    } catch (error) {}
  });
};

//填报列表数据展示

const onDblclick = (record) => {
  keyid.value = record["keyid"];
  showEditRow.value = true;
};

//查看报表数据
const pushClick = () => {
  if (tabSelData.value.length !== 1) {
    alertC("能且只能选择一条数据", "warning");
    return;
  }
  keyid.value = tabSelData.value[0]["keyid"];
  showEditRow.value = true;
};

onMounted(async () => {
  await getSearch(1);
});

// 编辑
let dialogTitle = ref<string>("创建任务");
let dialogRowTitle = ref<string>("表数据");

let showEdit = ref<boolean>(false);

// 导入
let showImp = ref<boolean>(false);

const toEdit = () => {
  showEdit.value = true;
};

defineExpose({
  toEdit,
});
</script>

<style lang="scss" scoped>
.icons-list :deep(.anticon) {
  margin-right: 6px;
  font-size: 24px;
}
</style>
